<template>
    <div>
        <HelloComponent></HelloComponent>
        <HelloComponent></HelloComponent>
        <HelloComponent></HelloComponent>

        <a-radio-group v-model="selectedComponet" @change="hanleComponentChanged" type="button">
            <a-radio value="A">ComponentA</a-radio>
            <a-radio value="B">ComponentB</a-radio>
            <a-radio value="C">ComponentC</a-radio>
        </a-radio-group>
        <ComponentA v-model:placeholder="selectedComponet"></ComponentA>
        <!-- <KeepAlive>
            <component v-bind="{placeholder: selectedComponet}" :is="current" style="margin-top: 12px;" ></component>
        </KeepAlive> -->
    </div>
</template>

<script setup>
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'
import ComponentC from './components/ComponentC.vue'
import { shallowRef,ref } from 'vue';

const selectedComponet = ref('A')
const current =  shallowRef(ComponentA)
const hanleComponentChanged = (v) => {
    switch (v) {
        case "A":
            current.value = ComponentA
            break;
        case "B":
            current.value = ComponentB
            break;
        case "C":
            current.value = ComponentC
            break;
    }
    console.log(v)
}

</script>

<style lang="scss" scoped>

</style>